/*---------------------------------------------------------------- 
// 文件功能描述：通用混合器、模块样式 
// author：Tyy
// 时间：2018/08/01
// 修改标识： 
// 修改描述：
//----------------------------------------------------------------*/

$bg-color:#eff1f3;
$main-color:#00cd86;
$key-color:#82bdae;

$border-color:#e0e0e0;
$font-color:#000;
$font-color1:#999;
$font-color2:#666;
$font-color3:#333;


//宽高
@mixin elementSize($w,$h){  
	width: $w;
	height: $h;
}
//旋转
@mixin transformRotate($angle,$x,$y){     
	transform: rotate($angle);
	-ms-transform: rotate($angle);		/* IE 9 */
	-webkit-transform: rotate($angle);	/* Safari and Chrome */
	-o-transform: rotate($angle);		/* Opera */
	-moz-transform: rotate($angle);		/* Firefox */
	transform-origin:$x $y;             //旋转中心
	-ms-transform-origin:$x $y;
	-webkit-transform-origin:$x $y;
	-o-transform-origin:$x $y;
	-moz-transform-origin:$x $y;
}
//flex布局,方向
// @mixin flexBox($dire){
// 	display: box;
// 	display:-webkit-box;  /* iOS 6-, Safari 3.1-6 */
// 	display:-moz-box;     /* Firefox 19 */
// 	display:-ms-flexbox;
// 	display:-webkit-flex; /* Chrome */
// 	display: flex;
// 	-webkit-flex-direction: $dire;
// 	flex-direction: $dire;
// 	-moz-flex-direction: $dire;
// 	-ms-flex-direction: $dire;
// 	-o-flex-direction: $dire;
// }
//flex布局,方向
@mixin flexBox($dire, $wrap) {
  display: box;
  display: -webkit-box;
  /* iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* Firefox 19 */
  display: -ms-flexbox;
  display: -webkit-flex;
  /* Chrome */
  display: flex;
  -webkit-justify-content: $dire;
  justify-content: $dire;
  -moz-justify-content: $dire;
  -ms-justify-content: $dire;
  -o-justify-content: $dire;
  -webkit-flex-wrap: $wrap;
  flex-wrap: $wrap;
  -moz-flex-wrap: $wrap;
  -ms-flex-wrap: $wrap;
  -o-flex-wrap: $wrap;
}
// 居中
@mixin center($p,$t,$l,$x,$y){
	position: $p;
	top: $t;
	left: $l;
	transform: translate($x,$y);
	-ms-transform: translate($x,$y);		/* IE 9 */
	-webkit-transform: translate($x,$y);	/* Safari and Chrome */
	-o-transform: translate($x,$y);	/* Opera */
	-moz-transform: translate($x,$y);	/* Firefox */
}
//单行省略号
@mixin line-ellipsis(){
	white-space:nowrap; 
	overflow: hidden;
	text-overflow:ellipsis;
}
//多行省略号
@mixin multiline-ellipsis($x){	                      
	display: -webkit-box;
	text-overflow:ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: $x;
	overflow: hidden;
	
}

// 公用遮罩
.in-mask {
  @include elementSize(100%, 100%);
  background: rgba(0, 0, 0, .75);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
}

// 公用背景

.alignitem{
	@include elementSize(100%,100%);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	white-space: initial;
	float: left;
}

.scroll{
	overflow: hidden;
	overflow-y: scroll;
	&::-webkit-scrollbar{
		display:none;
	}
	-webkit-overflow-scrolling: touch;
}


// 公用遮罩
.mask,.view .mask{
	@include elementSize(100%,100%);
	background: rgba(0,0,0,.5); 
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3000;
}


// 按钮
.btn{
	background: $key-color;
	color: #8f520f;
	text-align: center; 
}

//加载层
.loading{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 5000;
    @include elementSize(100%,100%);
    background: #fff;
    font-size: 0.32rem;
	color: #666;
	.loading-con{
		@include center(absolute,50%,50%,-50%,-50%);  
		text-align: center;
		img{
			margin: 0 auto;
			@include elementSize(2rem,auto);
		}
		p{
			padding: 0.2rem;
		}
	}
    
}


.upin-enter-active {
  animation-name: slideInUp;
  animation-duration: .5s;
}

.upin-leave-active {
  animation-name: slideOutDown;
  animation-duration: .5s;
}


//回到顶部
.goback-box{
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 80;
	.goback{
		position: absolute;
		bottom: 1.8rem;
		right: 0.1rem;
		// z-index: 80;
		img{
			@include elementSize(0.92rem,1.02rem);  
		}
	}
}


// 滚动条动画返回顶部
.slide-fade-enter-active {
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
}
.slide-fade-leave-active {
	transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	-webkit-transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter 
{
	transform: translateY(1rem);
	-webkit-transform: translateY(1rem);
	opacity: 0;
}
.slide-fade-leave-to{
	transform: translateY(-4rem);
	-webkit-transform: translateY(-4rem);
	opacity: 0;
}


.mask-enter-active{
	animation-name:zoomIn;
	animation-duration:.2s;
}
.mask-leave-active{
	animation-name:fadeOut;
	animation-duration:.2s;
}

.upDown-enter-active{
	animation-name:fadeInUp;
	animation-duration:.3s;
}
.upDown-leave-active{
	animation-name:fadeOutDown;
	animation-duration:.2s;
}


.topDown-enter-active{
	animation-name:slideInDown;
	animation-duration:.3s;
}


.tips-enter-active{
    animation-name:zoomIn;animation-duration:.5s;
}
.tips-leave-active{
    animation-name:zoomOut;animation-duration:.5s;
}

.leftfade-enter-active{
    animation-name:fadeInLeft;animation-duration:.2s;
}

.rightfade-enter-active{
	animation-name:slideInRight;animation-duration:.8s;
}

.rightfade-leave-active{
	animation-name:slideToRight;animation-duration:.8s;
}

.rightfadePage-enter-active{
	animation-name:slideInRight;animation-duration:.8s;
}

.rightfadePage-leave-active{
	animation-name:slideOutRight;animation-duration:.8s;
}

.topfade-enter-active{
    animation-name:slideInDown;animation-duration:.5s;
}

@keyframes rotateAni{
	0%  {transform: rotate(0);}
	100%  {transform: rotate(360deg);}
}

@keyframes marqueeroll {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100% {
        -webkit-transform: translateY(-250%);
        transform: translateY(-250%);
    }
}


@keyframes spring{
	0%  {transform: translateY(0);}
	25%  {transform: translateY(.2rem);}
	50%  {transform: translateY(0);}
	100%  {transform: translateY(-.2rem);}
}
